<template>
    <div class="bady-box">
        <div class="bottom-box">
            <div class="bottom-box-item"
                :style="item.btm ? { background: '#409eff', color: '#fff' } : { background: 'transparent', color: '#000' }"
                v-for="item in btmList" @click="btmClick(item)">
                {{ item.name }}
            </div>
        </div>
        <router-view />
    </div>
</template>
<script setup lang="ts">
const router = useRouter();
/**
 * 定义按钮数组的类型
 */
type btmListType = {
    name: string,
    url: string,
    btm: boolean
}
/**
 * 定义按钮数组
 */
const btmList = ref<btmListType[]>([
    {
        name: '大转盘',
        url: '/zhuanpan',
        btm: false,
    },
    {
        name: '九宫格',
        url: '/jiugongge',
        btm: false,
    },
    {
        name: '调起摄像头',
        url: '/paizhao',
        btm: false,
    },
    {
        name: 'three.js',
        url: '/three3D',
        btm: false,
    },
])
onMounted(() => {
    const btmUrl = sessionStorage.getItem('btmUrl');
    if (btmUrl) {
        btmClick(JSON.parse(btmUrl))
    } else {
        btmClick(btmList.value[0]);
    }

})
/**
 * 点击事件跳转路由
 * @param item 
 */
const btmClick = (item: btmListType) => {
    btmList.value.forEach(listItem => {
        if (listItem.name == item.name) {
            listItem.btm = true;
            sessionStorage.setItem('btmUrl', JSON.stringify(item))
        } else {
            listItem.btm = false;

        }
    }
    );
    router.push(item.url);
}
</script>
<style scoped lang="less">
.bady-box {
    width: 1200px;
    margin: 0 auto;

    .bottom-box {
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        justify-content: space-between;

        .bottom-box-item {
            padding: 5px 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }
    }
}
</style>